<template>
	<view class="page">

		<view class="p12">
			<view class="u-font-bold fz16 mb16">退款商品</view>
			<view class="mb20 bm pb16">
				<view class="u-flex" style="align-items: stretch;">
					<image :src="refundInfo.picUrl" style="width: 200rpx;" mode="widthFix"></image>
					<view class="pl12 u-f1 u-flex u-f-jsb" style="flex-direction: column;">
						<view class="fz14 u-flex u-f-jsb" style="width: 100%;">
							{{refundInfo.spuName}}
						</view>
						<view class="fz14 u-flex u-f-jsb u-font-bold" style="width: 100%;">
							￥{{refundInfo.price}}
							<span>x{{refundInfo.count}}</span>
						</view>
					</view>
				</view>
			</view>

			<view class="mb20 bm pb16">
				<view class="u-flex u-f-jsb pb10" @click="pupopShow=true">
					<view class="fz13 c6">
						<span style="color: #FF563B;">*</span>
						退款原因
					</view>
					<view class="u-flex">
						{{applyReason || '请选择'}}<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="u-flex u-f-jsb pt10 pb10">
					<view class="fz13 c6">
						<span style="color: #FF563B;">*</span>
						退款金额
					</view>
					<view style="color: #FF563B;">
						￥{{refundInfo.payPrice}}
					</view>
				</view>
				<view class="u-flex u-f-jsb pt10">
					<view class="fz13 c6">
						实际支付金额
					</view>
					<view>
						￥{{refundInfo.payPrice}}
					</view>
				</view>
			</view>
			<view class="fz14 mb12">补充描述</view>
			<view style="background: rgba(25,41,28,0.05);" class="brs5 p15">
				<textarea v-model="applyDescription" style="min-height:100px;width:100%" auto-height placeholder="补充描述，有助于商家进行处理"></textarea>
			</view>
			<view class="mt12">
				<u-upload :name="name" :form-data="formData" max-count="3" @on-success="onSuccess" @on-remove="onRemove"
					:action="action" :header="header" width="140" height="140"></u-upload>
			</view>

		</view>
		
		<view class="fixed-bottom p15">

			<view class="btn" @click="toRefund">提交申请</view>


		</view>
		
		<!-- 弹窗选择 -->
		<u-picker mode="selector" range-key="label" @confirm="popupConfirm" v-model="pupopShow" :range="reasonList"></u-picker>
		<!-- 弹窗选择 -->
	</view>
</template>

<script>
	import {
		apiBaseUrl
	} from '../../../config/config.js';
	export default {
		data() {
			return {
				orderId: '',
				info: "",
				pupopShow:false,
				name: 'file',
				formData: {
					'filename': 'file',
					'Authorization': this.$db.get("userToken")
				},
				action: apiBaseUrl + 'api/file/upload',
				header: {
					'Authorization': this.$db.get("userToken")
				},
				reasonList:[],
				applyReason:'',
				applyDescription:'',
				refundInfo: {},
				images: [],
			}
		},
		onLoad(e) {
			if (this.$db.get('refundInfo')) {
				this.refundInfo = JSON.parse(this.$db.get('refundInfo'))
				// this.$db.set('refundInfo','')
			}
		},
		onShow() {
			
			this.$api.dictList({
				dictType: 'refund_type'
			}, res => {
				if (res.code == 200) {
					this.reasonList = res.data
				}
			})
		},
		computed: {},
		methods: {
			popupConfirm(e) {
				let idx = e[0]
				this.applyReason = this.reasonList[idx].label
			},
			onRemove(e) {
				this.images.splice(e, 1)
			},
			onSuccess(e) {
				if (e.code == 200) {
					this.images.push(e.data)
				} else {
					this.$common.errorToShow(e.message)
				}
			},
			toRefund(){
				let post={
					orderItemId:this.refundInfo.id,
					applyReason:this.applyReason,
					applyDescription:this.applyDescription,
					applyPicUrls:String(this.images),
				}
				this.$api.afterSaleAdd(post, res => {
					if (res.code==200) {
						this.$common.successToShow('申请成功', ress => {
							uni.redirectTo({
								url: '/pages/user/order/index?tab=5'
							})
						})
					}else{
						this.$common.errorToShow(e.message)
					}
				})
			},
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.btn {
	
		width: 100%;
		height: 84rpx;
		text-align: center;
		color: #fff;
		line-height: 84rpx;
		background: #70B52C;
		border-radius: 16rpx;
	}
</style>